import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Tag, Badge, Button, Popconfirm, message, Input } from 'antd';
import router from 'umi/router';
import { queryQuestionList, deleteQuestion } from '@/services/question';
const { Search } = Input;
function QuestionManage () {

    const [ questionLists, setQuestionList ] = useState( [] );
    useEffect( () => {
        handleQueryList();
    }, [] );

    const handleQueryList = async ( payload ) => {

        const { data: { list } } = await queryQuestionList();
        setQuestionList( list );
    };

    const handelDeleteQuestion = async ( id ) => {
        console.log( id );
        const payload = {
            id
        };
        const res = await deleteQuestion( payload );
        if ( res.code == 0 )
        {
            message.success( '删除成功' );
        }
        handleQueryList();
    };

    const handleQuery = async ( value ) => {
        console.log( value );
        const title = value;
        const payload = {
            title
        };
        const { data: { list } } = await queryQuestionList( payload );
        setQuestionList( list );
    };
    const columns = [
        {
            title: "标题",
            dataIndex: "title",
            key: "title"
        },
        {
            title: "作者",
            dataIndex: "author",
            key: "author"
        },
        {
            title: "点赞数",
            dataIndex: "fabMembers",
            key: "fabMembers",
            render: ( fabMembers ) => {
                return (
                    <div >
                        <a>{ fabMembers.length || 0 }</a>
                    </div>
                );
            }
        },
        {
            title: "评论数",
            dataIndex: "comments",
            key: "comments",
            render: ( comments ) => {
                return (
                    <div >
                        <a>{ comments.length || 0 }</a>
                    </div>
                );
            }
        },
        {
            title: "收藏数",
            dataIndex: "starMembers",
            key: "starMembers",
            render: ( starMembers ) => {
                return (
                    <div >
                        <a>{ starMembers.length || 0 }</a>
                    </div>
                );
            }
        },
        {
            title: "发布时间",
            dataIndex: "createdAt",
            key: "createdAt"
        }, {
            title: "操作",
            dataIndex: "action",
            key: "action",
            render: ( text, record ) => {
                return (
                    <div>
                        <Button type="link" onClick={ () => { router.push( `/detail/question?id=${ record._id }` ); } }>浏览</Button>
                        <Popconfirm title="确定删除吗" onConfirm={ () => handelDeleteQuestion( record._id ) }>
                            <Button type="link" style={ { color: "red" } }>删除</Button>
                        </Popconfirm>
                    </div>
                );
            }
        }
    ];

    return (
        <div>
            <PageHeaderWrapper
                extra={ <div>
                    <Search placeholder="请搜索" onSearch={ value => handleQuery( value ) } enterButton />
                </div> }
            >
                <Card>
                    <Table
                        dataSource={ questionLists }
                        columns={ columns }
                        expandable={ {
                            expandedRowRender: record => {
                                return (
                                    <div>
                                        <div>
                                            <span style={ { color: "#000000", fontWeight: "bold" } }>内容:</span>
                                            <p style={ { margin: 0 } }>{ record.content }</p>
                                        </div>
                                    </div>
                                );
                            },
                        } }
                    />
                </Card>
            </PageHeaderWrapper>

        </div>
    );
}

export default QuestionManage;
